<script setup>
import { onUnmounted } from 'vue';

const $post = inject('$post');
const $put = inject('$put');

const loginForm = ref({
    phone: '',
    code: '',
    newPassword: '',
    confirmPassword: '',
});
const loginRef = ref();
const showPassword = ref(false);
const showPasswordAgain = ref(false);
let codeTime = null;

onUnmounted(() => {
    if (codeTimer) {
        clearInterval(codeTimer);
        codeTimer = null;
    }
});

function getCode() {
    if (codeTime.value > 0) return;
    if (!loginForm.value.phone || loginForm.value.phone.length !== 11) {
        uni.showToast({
            title: '请输入正确的手机号',
            icon: 'none',
        });
        return;
    }
    $post('/auth/platform/smsSend', {
        phone: loginForm.value.phone,
    }).then(res => {
        if (res.code === 200) {
            uni.showToast({
                title: '验证码已发送',
                icon: 'success',
            });
            codeTime.value = 60;
            codeTimer = setInterval(() => {
                codeTime.value--;
                if (codeTime.value <= 0) {
                    clearInterval(codeTimer);
                    codeTimer = null;
                }
            }, 1000);
        }
    });
}

function recover() {
    loginRef.value.validate().then(({ valid }) => {
        if (valid) {
            uni.showLoading({
                title: '提交中...',
                mask: true,
            });
            $put('/auth/platform/changePasswordByPhone', loginForm.value).then(res => {
                uni.hideLoading();
                if (res.code == 200) {
                    uni.showToast({
                        title: '密码重置成功',
                        icon: 'success',
                    });
                    setTimeout(() => {
                        uni.navigateBack();
                    }, 1000);
                }
            });
        }
    });
}
</script>

<template>
    <div class="recover_box">
        <u-navbar title="找回密码" :autoBack="true" placeholder bg-color="#f5f5f5"></u-navbar>
        <div class="web_login">
            <div class="center">
                <wd-img src="/static/image/logo_person.png" width="200" mode="widthFix"></wd-img>
            </div>
            <wd-form :model="loginForm" ref="loginRef">
                <wd-input
                    type="text"
                    v-model="loginForm.phone"
                    placeholder="请输入手机号"
                    size="large"
                    prop="phone"
                    :rules="[{ required: true, message: '请输入手机号' }]"
                    :maxlength="11"
                />
                <wd-input
                    type="number"
                    v-model="loginForm.code"
                    placeholder="请输入验证码"
                    size="large"
                    prop="code"
                    :rules="[{ required: true, message: '请输入验证码' }]"
                    :maxlength="6"
                >
                    <template #suffix>
                        <wd-button
                            type="text"
                            :disabled="codeTime > 0"
                            size="small"
                            @click="getCode"
                        >
                            {{ codeTime > 0 ? `${codeTime}s` : '获取验证码' }}
                        </wd-button>
                    </template>
                </wd-input>
                <wd-input
                    :type="showPassword ? 'text' : 'password'"
                    v-model="loginForm.newPassword"
                    placeholder="请输入密码"
                    prop="newPassword"
                    size="large"
                    :rules="[{ required: true, message: '请输入密码' }]"
                    :maxlength="30"
                >
                    <template #suffix>
                        <wd-icon
                            :name="showPassword ? 'view' : 'eye-close'"
                            size="22px"
                            @click="showPassword = !showPassword"
                        ></wd-icon>
                    </template>
                </wd-input>
                <wd-input
                    :type="showPasswordAgain ? 'text' : 'password'"
                    v-model="loginForm.confirmPassword"
                    placeholder="请确认密码"
                    prop="confirmPassword"
                    size="large"
                    :rules="[{ required: true, message: '请确认密码' }]"
                    :maxlength="30"
                >
                    <template #suffix>
                        <wd-icon
                            :name="showPasswordAgain ? 'view' : 'eye-close'"
                            size="22px"
                            @click="showPasswordAgain = !showPasswordAgain"
                        ></wd-icon>
                    </template>
                </wd-input>
                <u-button type="warning" size="large" @click="recover">立即找回</u-button>
            </wd-form>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.recover_box {
    .web_login {
        padding: 30px 20px;
        .center {
            text-align: center;
        }
        :deep(.wd-form) {
            display: flex;
            flex-direction: column;
            padding: 50px 10px;
            .wd-input {
                background: transparent;
                .wd-icon {
                    background: transparent;
                    color: #fb6f2e;
                }
                button {
                    margin: 0;
                    font-weight: bold;
                    font-size: 14px;
                    color: #fb6f2e;
                }
            }
            button {
                margin-top: 50px;
            }
        }
        :deep(.u-tabs__wrapper__nav__item__text) {
            font-size: 16px;
        }
    }
}
</style>
